<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>报警记录</title>
	<meta name="renderer" content="webkit|ie-comp|ie-stand" />  
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" type="text/css" href="layui/css/layui.css" media="all">
	<link rel="stylesheet" type="text/css" href="css/index.css"/>
</head>

<body>
<section class="layui-larry-box">
	<div class="larry-personal">
		<div class="layui-tab">
			<blockquote class="layui-elem-quote mylog-info-tit" style="background: #fff;">
				<ul class="handle-box" id="conditions">
					<li class="handle-item">
						<span class="layui-form-label">设备名称：</span>
						<div class="layui-input-inline">
							<input type="text" autocomplete="off" placeholder="输入设备名称" class="layui-input"
								   v-model="deviceName">
						</div>
						<div class="layui-btn mgl-20"  @click="message_cx">查询</div>
					</li>
					<li class="handle-item" style="padding-top: 10px;">
                        <span class="layui-form-label">设备状态：</span>
                        <div style="height: 38px; line-height: 38px;" class="btn_block">
                            <label class="layui-btn-block">不限<input type="radio" name="sex3" value="-1" style="display: none;" v-model="exceptionType" @change="message_cx"></label>
                           	<label class="layui-btn-none">超限<input type="radio" name="sex3" value="1" style="display: none;" v-model="exceptionType" @change="message_cx"></label>
                            <label class="layui-btn-none">异常<input type="radio" name="sex3" value="0" style="display: none;" v-model="exceptionType" @change="message_cx"></label>
                            <label class="layui-btn-none">离线<input type="radio" name="sex3" value="3" style="display: none;" v-model="exceptionType" @change="message_cx"></label>
                        </div>
                    </li>
					<li class="handle-item">
						<div class="layui-form-item">
							<label class="layui-form-label">报警时间：</label>
							<div class="layui-input-inline">
								<input class="layui-input" placeholder="开始时间" id="start"
									   name="start" v-model="startTime"
									   onclick="layui.laydate({elem: this,  istime: false, format: 'YYYY-MM-DD', max: laydate.now(+0), choose: function(datas){
					                vue.startChange(datas);
					            }})">
							</div>
							<div class="layui-input-inline">
								<input class="layui-input" placeholder="结束时间" id="end" name="end" v-model="endTime"
									   onclick="layui.laydate({elem: this,istime: false, format: 'YYYY-MM-DD',  max: laydate.now(+0), choose: function(datas){ 
					                vue.endChange(datas);
					            }})">
							</div>
						</div>
					</li>
				</ul>
				<div class="layui-tab-item layui-field-box layui-show">
					<table class="table-box table-sort" id="message" lay-even="" lay-skin="nob">
					</table>
				</div>
			</blockquote>
			<div class="layui-clear">
				<div class="layui-btn mgl-20" id="message_bj">标记为已读</div>
				<div class="layui-btn mgl-20" id="message_qb">全部标记为已读</div>
			</div>
		</div>
	</div>
</section>
<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/message.js"></script>
<script type="text/javascript" src="js/vue/vue.js"></script>
<script src="//cdn.bootcss.com/jquery/3.2.0/jquery.js"></script>
<script src="//cdn.bootcss.com/vue-resource/1.2.1/vue-resource.js"></script>
<script type="text/javascript">

	layui.use('laydate', function() {
		var laydate = layui.laydate;
		var $ = layui.jquery;

		function setSize() {
			$('#line-chart').css("width", $(window).width());
			$('#pie-chart').css("width", $(window).width() * 0.45);
			$('#column-chart').css("width", $(window).width() * 0.45);

		}

		//页面加载时设框架款宽度
		$(document).ready(function () {
			setSize();
		});

		//人工拖扯窗口大小时，重设框架款宽度
		$(window).resize(function () {
			setSize();
		});

		$(document).ready(function () {
			$("#unfold").click(function () {
				$("#model").toggle();
				$("#time").toggle();
			});
		});

		var start = {
			min: '2000-01-01 00:00:01',
			max: laydate.now(),
			istoday: false,
			choose: function (datas) {
				end.min = datas; //开始日选好后，重置结束日的最小日期
				end.start = datas //将结束日的初始值设定为开始日
				vue.timeChange('start', datas);
			}
		};

		var end = {
			min: '2000-01-01 00:00:01',
			max: laydate.now(),
			istoday: false,
			choose: function (datas) {
				start.max = datas; //结束日选好后，重置开始日的最大日期
				vue.timeChange('end', datas);
			}
		};

		document.getElementById('start').onclick = function () {
			start.elem = this;
			laydate(start);
		}
		document.getElementById('end').onclick = function () {
			end.elem = this
			laydate(end);
		}
	});

	var vue = new Vue({
				el: '#conditions',
				data: {
					deviceName: "",
					exceptionType: -1,
					startTime: "",
					endTime:"",
					myTable:null,
				},
				mounted: function () {
					this.$nextTick(function () {
					});
				},
				methods: {
					timeChange: function(type, time) {
						if(type == "start")
							this.startTime = time;
						if(type == "end")
							this.endTime = time;
						var start = $("#start").val();
						var end = $("#end").val();
						var dataTypeValue=this.dataType;
						if(!start) {
							return false;
						}
						if(!end) {
							return false;
						}
						this.message_init();
					},
					message_init:function () {
						var _self=this;
						myTable = $('#message').DataTable({
							//开启服务器模式
							"serverSide": true,
							"destroy":true, //Cannot reinitialise DataTable,解决重新加载表格内容问题
							"processing": false, //DataTables载入数据时，是否显示‘进度’提示
							"stateSave": true, //是否打开客户端状态记录功能,此功能在ajax刷新纪录的时候不会将个性化设定回复为初始化状态
							"scrollCollapse": true, //是否开启DataTables的高度自适应，当数据条数不够分页数据条数的时候，插件高度是否随数据条数而改变
							"paginationType": "full_numbers", //详细分页组，可以支持直接跳转到某页
							"language": lang, //提示信息
							"autoWidth": false, //自适应宽度，
							"lengthMenu": [15, 30, 50],
							"stripeClasses": ["odd", "even"], //为奇偶行加上样式，兼容不支持CSS伪类的场合
							"searching": false, //是否允许Datatables开启本地搜索
							"paging": true, //是否开启本地分页
							"lengthChange": false, //是否允许产品改变表格每页显示的记录数
							"info": false, //控制是否显示表格左下角的信息
							//跟数组下标一样，第一列从0开始，这里表格初始化时，第四列默认降序
							"order": [6, 'desc'], //asc升序   desc降序
							"aoColumnDefs": [{
								"orderable": false,
								"aTargets": [0,1,2,3,4,5,7] // 指定列不参与排序
							}],
							"deferRender": true, //延迟渲染
							//"ajax":"json/device.json",
							"ajax": {
								url : url + '/ic-iot/admin/'+adminId+'/exceptions/page',//users
								type : 'get',
								data:{
									"startTime":_self.startTime,
									"endTime":_self.endTime,
									"deviceName":_self.deviceName,
									"exceptionType":_self.exceptionType,
								},
								dataType : 'json',
								beforeSend: function(request) {
									request.setRequestHeader("accessToken", accessToken);
								},
							}, //数据的路径 "http://192.168.5.133:8081/ic-iot/admin/'+adminId+'/devices" /"json/device.json"
							select: { //单击tr选中当前行
								style: 'multi'
							},

							"columns": [{ //定义列
								"data": function(obj) {
									//debugger;
									return '<input type="checkbox" class="fly-checkbox" name="sublist" ids=' + obj.exceptionId + '>';
								},
								"sTitle": "<input type='checkbox' class='btn-checkall fly-checkbox'>", //标题
								"sDefaultContent": "", //此列默认值为""，以防数据中没有此值，DataTables加载数据的时候报错
							}, {
								"data": "deviceName",
								"sTitle": "设备名称", //标题
								"sDefaultContent": "", //此列默认值为""，以防数据中没有此值，DataTables加载数据的时候报错
							}, {
								"data": "detailTypeInfo",
								"sTitle": "报警原因", //标题
								"sType": 'chinese',
								"sDefaultContent": "", //此列默认值为""，以防数据中没有此值，DataTables加载数据的时候报错
							}, {
								"data": function(obj) {
									if (obj.exceptionType == 0) {
										return '<u class="btn-showuser" style="color:#fad60d">' + '故障' + '</u>';
									} else if (obj.exceptionType == 1) {
										return '<u class="btn-showuser" style="color:red">' + '超限' + '</u>';
									} else if (obj.exceptionType == 3) {
										return '<u class="btn-showuser" style="color:#999">' + '离线' + '</u>';
									}
								},
								"sTitle": "异常类型", //标题
								"sDefaultContent": "", //此列默认值为""，以防数据中没有此值，DataTables加载数据的时候报错
							}, {
								"data": function(obj) {
									var startTime =replaceTime(obj.start / 1000);;
									return startTime;
								},
								"sTitle": "开始时间", //标题
								"sDefaultContent": "", //此列默认值为""，以防数据中没有此值，DataTables加载数据的时候报错
							}, {
								"data": function(obj) {
									if(obj.end == ''){
										return '暂未结束';
									}else{
										var endTime =replaceTime(obj.end / 1000);;
										return endTime;
									}
									
								},
								"sTitle": "结束时间", //标题
								"sDefaultContent": "", //此列默认值为""，以防数据中没有此值，DataTables加载数据的时候报错
							},{
								"data":function(obj){
									if(obj.isRead == 0) {
										return '<span class="label label-success radius">已读</span>';
									} else {
										return '<span class="label label-default radius">未读</span>';
									}
								},
								"sTitle": "已/未读", //标题
								"sDefaultContent": "", //此列默认值为""，以防数据中没有此值，DataTables加载数据的时候报错
							}, {
								"data": function(obj) {
									return '<span title="查看" data='+obj.exceptionId+' alt='+obj.deviceId+' start='+obj.start+' end='+obj.end+' read='+obj.isRead+' class="handle-btn handle-btn-edit"><i style="color:#5ebdc7; font-size:20px;" class="layui-icon">&#xe60a;</i></span>';

									//<span title="启用" class="handle-btn handle-btn-run"><i class="linyer icon-qiyong"></i></span>
								},
								"className": "td-handle",
								"sTitle": "操作", //标题
								"sDefaultContent": "", //此列默认值为""，以防数据中没有此值，DataTables加载数据的时候报错
							}]
						});
					},
					message_cx: function () {
						this.message_init();
					}
						/*var params = new Object();
						params.pageSize = 999;99999
						params.currentPage = 1;
						if(this.endTime < this.startTime){
							layer.msg("结束时间请大于开始时间");
						}
						/!*if (this.deviceName != "")
							params.deviceName = this.deviceName;

						if (this.exceptionType != -1)
							params.exceptionType = this.exceptionType;
						
						if (this.startTime != "")
							params.startTime = this.startTime;

						if (this.endTime != "")
							params.endTime = this.endTime;*!/

						var token = new Object();
						token.accessToken = accessToken;
						this.$http.get(url + '/ic-iot/admin/' + adminId + '/exceptions/page',
								{params: params, headers: token}).then(function (response) {
							var res = response.body;
							if (res.code == 1) {
								var result = res.result;
								$('#message').dataTable().fnClearTable();
								if (result.length != 0)
									$('#message').dataTable().fnAddData(result);
							}else {
								ifajax(res);
							}
						}).catch(function (response) {
							console.log(response)
						});
					}*/
				}
			}
	);
</script>
</body>
</html>


